<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
.ipt{
    padding: 5px 10px;
}
</style>
<title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>
<div class="box">box</div>
<input type="text" class="ipt">

<script>
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
var ipt = document.querySelector('.ipt');

// 事件类型：

// 添加事件：on + 事件类型 = 事件处理函数

 // focus 输入框获得焦点时触发
// ipt.onfocus = function (){
//     console.log( '获取焦点。。。' )
// }

// // blur 输入框失去焦点时触发
// ipt.onblur = function (){
//     console.log( '失去焦点。。。' )
// }

// // input 用户输入时触发
// ipt.oninput = function (){
//     console.log( '用户输入。。。' )
// }

// // change 输入框值改变时触发
// ipt.onchange = function (){
//     console.log( '值改变了。。。' )
// } 

// // click 鼠标左键按下并抬起时触发（单击）
// btn.onclick = function (){
//     console.log( 'btn点击了。。。' )
// }

// // dblclick 鼠标左键按下并抬起两次时触发（双击）
// box.ondblclick = function (){
//     console.log( '双击触发。。。' )
// }

// // contextmenu 鼠标右键点击时触发
// box.oncontextmenu = function (){
//     console.log( '右键点击。。。' )
// }

// // mousedown 鼠标按下时触发
// box.onmousedown = function (){
//     console.log( '鼠标按下。。。' )
// }

// // mousedup 鼠标抬起时触发
// box.onmouseup = function (){
//     console.log( '鼠标抬起。。。' )
// }

// // mouseover 鼠标移到某元素之上时触发
// box.onmouseover = function (){
//     console.log( '鼠标移入。。。' )
// }

// // mouseout 鼠标某元素移出时触发
// box.onmouseout = function (){
//     console.log( '鼠标移出。。。' )
// }

// // mouseenter 鼠标进入时触发
// box.onmouseenter = function (){
//     console.log( '鼠标进入' )
// }

// // mouseleave 鼠标离开时触发
// box.onmouseleave = function (){
//     console.log( '鼠标离开' )
// }

// mousemove 鼠标移动时触发（高频触发事件）
document.onmousemove = function (){
    console.log( '鼠标移动。。。' )
}

// // keydown 键盘按键按下时触发（按下所有键都触发）
// document.onkeydown = function (){
//     console.log( 'keydown触发。。。' )
// }

// // keyup 键盘按键抬起时触发
// document.onkeyup = function (){
//     console.log( '键盘抬起。。。' )
// }

// // keypress 键盘按键按下时触发（按下功能键不会触发 ctrl alt shift F1 F2 ...）
// document.onkeypress = function (){
//     console.log( 'keypress触发。。。' )
// }




</script>
</body>
</html>